/**
  * @description: 一个按钮的测试页面
  * @author: yingying.fan
  * @date: 2019/3/8 14:30
  */
import React, { Component } from 'react'
import {
  StyleSheet,
  SafeAreaView,
  View
} from 'react-native'
import { px2dp } from 'rn-xiaobu-utils'
import Button from 'react-native-smart-button'

export default class ButtonTestPage extends Component {

  constructor (props) {
    super(props)
    this.state = {}
  }

  render () {
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.wrapper}>
          <Button
            style={styles.buttonStyle}
            textStyle={styles.buttonTextStyle}
            disabledStyle={styles.buttonDisabledStyle}
            disabledTextStyle={styles.buttonDisabledTextStyle}>
            disabled (按钮禁用)
          </Button>
        </View>
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  wrapper: {
    width: px2dp(690)
  },
  buttonStyle: {
    margin: 10,
    height: 40,
    backgroundColor: 'red',
    borderRadius: 3,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: 'red',
    justifyContent: 'center'
  },
  buttonTextStyle: {
    fontSize: 17,
    color: 'white'
  },
  buttonDisabledStyle: {
    backgroundColor: '#DDDDDD',
    borderWidth: 0
  },
  buttonDisabledTextStyle: {
    color: '#BCBCBC'
  }
})